<template>
  <div id="distributionDiv" />
</template>

<script>
import * as vueEcharts from 'echarts'
import zaixian from '@/assets/images/zaixian.png'
import shangxian from '@/assets/images/shangxian.png'
import lixian from '@/assets/images/lixian.png'
// 注册山东省地图
const guizhouJson = require('@/assets/shandong.json')
vueEcharts.registerMap('guizhou', guizhouJson)
export default {
  name: 'DynamicMap',
  data() {
    return {}
  },
  mounted() {
    this.getDistributionOptions()
  },
  methods: {
    getDistributionOptions() {
      // 获取经纬度数据
      const seriesList = [{
        image: zaixian,
        data: [{
          value: [106.9, 27.7]
        },
        {
          value: [105.29, 27.32]
        },
        {
          value: [106.04, 27.03]
        },
        {
          value: [104.82, 26.58]
        }
        ]
      },
      {
        image: shangxian,
        data: [{
          value: [107.43, 28.56]
        }]
      },
      {
        image: lixian,
        data: [{
          value: [107.5, 27.76]
        }]
      }
      ]
      // 自定义图标
      const series = seriesList.map(v => {
        return {
          type: 'custom', // 配置显示方式为用户自定义
          coordinateSystem: 'geo',
          renderItem(params, api) {
            // 具体实现自定义图标的方法
            return {
              type: 'image',
              style: {
                image: v.image,
                x: api.coord([
                  v.data[params.dataIndex].value[0],
                  v.data[params.dataIndex].value[1]
                ])[0],
                y: api.coord([
                  v.data[params.dataIndex].value[0],
                  v.data[params.dataIndex].value[1]
                ])[1],
                width: '29',
                height: '35'
              }
            }
          },
          data: v.data
        }
      })
      // options
      const distributionOptions = {
        tooltip: {
          show: true, // 鼠标移入是否触发数据
          trigger: 'item', // 触发方式
          triggerOn: 'click',
          formatter: '名称:{b}<br />坐标:{c}'
        },
        series,
        geo: {
          // 引入贵州省的地图
          map: 'guizhou',
          layoutCenter: ['50%', '50%'], // 设置后left/right/top/bottom等属性无效
          layoutSize: '90%',
          roam: false, // 关闭鼠标缩放和拖动
          zoom: 1,
          label: {
            normal: {
              // 静态的时候展示样式
              show: true, // 是否显示地图省份得名称
              textStyle: {
                color: '#fff',
                // fontSize: 10,
                fontFamily: 'Arial'
              }
            },
            emphasis: {
              show: true,
              // 动态展示的样式
              color: '#fff'
            }
          },
          itemStyle: {
            // 设置地图块的相关显示信息
            normal: {
              areaColor: '#8db200',
              borderColor: '#6367ad',
              borderWidth: 1,
              textStyle: {
                color: '#fff'
              },
              // 地图块凸起
              // shadowBlur: 10,
              // shadowOffsetX: 10
              left: '5%',
              right: '5%',
              top: '5%',
              bottom: '5%'
            },
            emphasis: {
              areaColor: '#feb6aa', // hover效果
              color: '#fff'
            }
          }
        }
      }
      var myChart = vueEcharts.init(document.getElementById('distributionDiv'))
      myChart.setOption(distributionOptions)
      myChart.on('click', function(params) {
        console.log('获取当前市区：', params) // 此处写点击事件内容
      }) // 点击事件，此事件还可以用到柱状图等其他地图
      window.onresize = function() {
        myChart.resize()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
#distributionDiv {
  width: 100%;
  height: 800px;
}
</style>
